<template>
    <div class="fr dis_flex">
        <div class="dis_flex cursor_p position_r">
            <div @click="showMessages" class="messages-icon default-icon"></div>
            <div @click="showMessages" class="message_cont_box">
                <sup v-if="msgsNumber > 0">
                    <span class="message-num">
                        <span class="">
                            {{ msgsNumber > 99 ? '99+' : msgsNumber }}
                        </span>
                    </span>
                </sup>
            </div>
            <div v-if="drawerDisplay" class="triangle"></div>
            <div v-if="drawerDisplay" class="drawer_box">
                <MessageList></MessageList>
            </div>
        </div>
        <div class="dis_flex cursor_p">
            <div class="language-icon default-icon"></div>
            <span class="ml10 navigating_text">简体中文</span>
        </div>
        <div class="ml10">
            <span @click="goToChangeTheme" class="navigating_text">主题设置</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    getAllMsg, getMsg, getCount, setMsg, deleteMsg,
} from '@/api/api.query.util';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import MessageList from '@/components/MessageList.vue';
import PubSub from 'pubsub-js';

const router = useRouter();
const drawerDisplay = ref(false);
const msgsNumber = ref(0);

onMounted(() => {
    document.addEventListener('keyup', (e) => {
        drawerDisplay.value = false;
    });
});
initCount();
PubSub.subscribe('initCount', () => {
    initCount();
});

function initCount() {
    getCount({
        method: 'get',
        data: {},
    }).then((res) => {
        msgsNumber.value = res.result;
    });
}
function showMessages() {
    drawerDisplay.value = !drawerDisplay.value;
}
function goToChangeTheme() {
    router.push({ name: '/change-theme' });
}
</script>

<style lang="scss" scoped>
.drawer_box {
    position: absolute;
    z-index: 99999;
    width: 342px;
    top: 36px;
    height: 560px;
    background-color: #ffffff;
    left: -185px;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
}
.navigating_text {
    width: 48px;
    font-size: 12px;
    color: #999999;
    line-height: 32px;
    cursor: pointer;
}
.messages-icon {
    background: url(../assets/image/message_default@2x.png) no-repeat 0 / 16px;
}
.language-icon {
    background: url(../assets/image/globe@2x.png) no-repeat 0 / 16px;
}

.message_cont_box {
    margin-left: -2px;
    margin-top: -5px;
    height: 24px;
    width: 27px;
}

.default-icon {
    cursor: pointer;
    width: 16px;
    height: 32px;
}
/deep/ .father_drawer {
    height: calc(100% - 72px) !important;
    width: 340px !important;
    top: 72px;
    right: 0px;
    background-color: #ebebeb;
    .el-drawer__body {
        padding: 0px;
        height: 100%;
    }
}
.message_list::-webkit-scrollbar {
    width: 0 !important;
}
.triangle {
    z-index: 999999;
    position: relative;
}
.triangle:before {
    position: absolute;
    content: '';
    top: 27px;
    left: -38px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 15px 12px;
    border-color: transparent transparent #ffffff transparent;
}
.message-num {
    position: absolute;
    left: 9px;
    top: 0px;
    height: 12px;
    background-color: var(--alert-color);
    border-radius: var(--border-radius);
    color: var(--text-default);
    padding: 0 4px;

    span {
        position: relative;
        top: -8px;
        font-size: 20px;
        zoom: 0.5;
    }
}
</style>
